<template>
    <view class="content nova-column">
        <text class="section">个人资质</text>
        <view class="nova-row-center types" @click="showPopup">
            <text class="type" style="padding: 0 50rpx;">选择资质类型</text>
            <text class="value">{{ types.length > 0 ? types[type].qualifications_name : '' }}</text>
        </view>

        <view v-if="imgs.length > 0" class="nova-column list">
            <view class="nova-column li" v-for="(item, index) in imgs" :key="index">
                <text class="name">{{ item.type }}</text>
                <image class="img" :src="item.image"></image>
            </view>
        </view>

        <uni-popup ref="popup">
            <view class="content nova-column nova-flex-center popup" style="position: relative;">
                <picker-view :value="[type]" @change="bindChange" style="width: 480rpx; height: 480rpx;">
                    <picker-view-column>
                        <view class="item" v-for="(item, index) in types" :key="index" style="text-align: center; line-height: 80rpx; height: 80rpx;">{{ item.qualifications_name }}</view>
                    </picker-view-column>
                </picker-view>

                <image style="width: 136rpx; height: 136rpx;" :src="picked || plus" @click.stop="pickImg"></image>
                <view class="nova-flex nova-flex-center btn-primary" style="height: 75rpx; width: 260rpx; margin-top: 40rpx;" @click="upload">确定</view>
                <image
                    style="width: 58rpx; height: 56rpx; position: absolute; top: 0; right: 0; margin: 34rpx;"
                    src="../../static/img/dialog-close.png"
                    @click="cancelPick()"
                ></image>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import uniPopup from '../../components/uni-popup/uni-popup.vue';
export default {
    components: {
        uniPopup
    },
    data() {
        return {
            type: 0,
            typeName: '',
            types: [],
            imgs: [],
            picked: '',
            plus: '../../static/img/upload_add.png'
        };
    },
    methods: {
        showPopup(show) {
            this.$refs.popup.open();
        },
        bindChange(e) {
            console.log(e);
            this.type = e.detail.value[0];
            let typeName = this.types[this.type].qualifications_name;
            let t = '';
            this.imgs.forEach(item => {
                if (item.type === typeName) {
                    t = item.image;
                }
            });
        },
        pickImg(key) {
            var that = this;
            uni.chooseImage({
                count: 1,
                success: function(res) {
                    console.log(res);
                    let path = res.tempFilePaths[0];
                    that.picked = path;
                }
            });
        },
        cancelPick() {
            this.picked = '';
            this.$refs.popup.close();
        },
        async upload(key, f) {
            var that = this;
            let res = await this.$request.upload({
                url: '/user/uploadPic',

                filePath: this.picked,
                name: 'file',
                loadingTip: '上传中，请稍候',
                formData: {
                    sessionkey: this.$global.sessionkey
                }
            });
            console.log(res);
            let url = res[0].url;
            this.saveImg(url);
            return;
        },
        async saveImg(url) {
            if (!this.picked) {
                this.$toast('请选择图片');
                return;
            }
            let res = await this.$request.post({
                url: '/user/insertImg',
                data: {
                    type: this.types[this.type].qualifications_name,
                    image: url
                },
                loadingTip: '提交中，请稍候'
            });
            this.cancelPick();
            this.loadData();
        },
        async loadData() {
            let res = await this.$request.post({
                url: '/house/displayImage',
                data: {
                    type: this.$global.role
                }
            });
            this.types = res.qualifications || [];
            this.imgs = res.result || [];
        }
    },
    onLoad() {
        this.loadData();
    }
};
</script>

<style lang="scss">
.content {
    padding: 20rpx 64rpx;
    .section {
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 60rpx;
    }
    .types {
        border-color: #eeeeee;
        border-style: solid;
        border-width: 0;
        @include thin-border(top);
        @include thin-border(bottom);
        .type {
            line-height: 30rpx;
            font-size: 30rpx;
            color: #000;
            border-color: #eeeeee;
            border-style: solid;
            border-width: 0;
            @include thin-border(right);
        }
        .value {
            line-height: 100rpx;
            font-size: 30rpx;
            color: #000;
            padding: 0 20rpx;
            white-space: nowrap;
        }
    }
}
.list {
    .li {
        .name {
            line-height: 68rpx;
            color: #666666;
            font-size: 28rpx;
        }
        .img {
            width: 360rpx;
            height: 240rpx;
            align-self: center;
            margin-bottom: 40rpx;
        }
    }
}
.popup {
    background-color: white;
    width: 680rpx;
    border-radius: 12rpx;
    padding: 30rpx;
}
</style>
